/*
 * @Description: header
 * @Date: 2021-03-03 16:59:39
 * @Author: 黄治恩
 */

import React, { Component } from 'react';

import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
import { Menu, Badge, Button, Avatar, Input } from 'antd';
import { BellOutlined, UserOutlined, SearchOutlined  } from '@ant-design/icons';

import './style.scss';

interface Props_type extends RouteComponentProps {}

interface Menu_type {
  path:string,
  name:string
}

class Header extends Component<Props_type> {

  state = {
    menuList:[
      {
        path:'/',
        name:'首页'
      },
      {
        path:'/about',
        name:'社区'
      },
      {
        path:'/user',
        name:'活动'
      }
    ]
  }

  render() {
    const { menuList } = this.state
    const { pathname } = this.props.location

    return (
      <header className="sy-header">
        <div className="header-info">
          <Link to="/">
            logo
          </Link>
          <Menu selectedKeys={[pathname]} mode="horizontal" >
            {
              menuList.map( (item:Menu_type) => (
                  <Menu.Item key={item.path}>
                    <Link to={item.path}>{item.name}</Link>
                  </Menu.Item>
                )
              )
            }
          </Menu>
            
          <div className="search-box">
            <SearchOutlined />
            <Input  placeholder="搜索..." bordered={false} />
          </div>

          <Badge count={5} size="small">
            <BellOutlined />
          </Badge>
          {
            true 
            ? (
              <Link to="/user">
                <Avatar className="user-avatar" size={36} icon={<UserOutlined />} />
              </Link>
            ) 
            : (
              <div className="login-box">
                <Button className="login-btn" size="small">登录</Button>
                <Button className="register-btn" size="small" type="primary">注册</Button>
              </div> 
            )
          }
        </div>
      </header>
    );
  }
}

export default withRouter(Header);